<template>
  <el-dialog
    :modelValue="visible"
    @update:model-value="$emit('update:visible', $event)"
    title="数据库连接"
    width="650px"
    :before-close="handleClose"
    destroy-on-close
  >
    <el-form :model="formData" label-width="100px" :rules="rules" ref="formRef">
      <el-form-item label="名称" prop="name" required>
        <el-input v-model="formData.name" placeholder="请输入数据库名称" />
      </el-form-item>

      <el-form-item label="说明">
        <el-input v-model="formData.description" placeholder="说明" />
      </el-form-item>

      <el-form-item label="数据库类型" prop="dbType" required>
        <el-select v-model="formData.dbType" placeholder="请选择数据库类型" class="w-full">
          <el-option label="MySQL" value="MySQL" />
          <el-option label="SQL Server" value="SQL Server" />
          <el-option label="ClickHouse" value="ClickHouse" />
          <el-option label="达梦" value="DM" />
          <el-option label="PostgreSQL" value="PostgreSQL" />
          <el-option label="Oracle" value="Oracle" />
          <el-option label="Redis" value="Redis" />
          <el-option label="MongoDB" value="MongoDB" />
        </el-select>
      </el-form-item>

      <div class="connection-section">
        <h3>连接配置</h3>
        <div class="env-tabs">
          <el-radio-group v-model="selectedEnv">
            <el-radio-button label="default">默认环境</el-radio-button>
            <el-radio-button label="mock">Mock环境</el-radio-button>
            <el-radio-button label="local">local 8080</el-radio-button>
            <el-radio-button label="local-https">local-https</el-radio-button>
            <el-radio-button label="production">生产</el-radio-button>
          </el-radio-group>
        </div>

        <el-form-item label="用户名">
          <el-input v-model="formData.username" placeholder="请输入用户名" />
        </el-form-item>

        <el-form-item label="密码">
          <el-input
            v-model="formData.password"
            type="password"
            placeholder="请输入密码"
            show-password
          />
        </el-form-item>

        <el-form-item label="数据库名">
          <el-input v-model="formData.database" placeholder="请输入数据库名称" />
        </el-form-item>
      </div>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button @click="testConnection" :loading="testingConnection">测试连接</el-button>
        <el-button type="primary" @click="confirm" :loading="saving">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, PropType, computed } from 'vue'
import { ElMessage } from 'element-plus'

export interface DatabaseConnection {
  id?: string
  name: string
  description?: string
  dbType: string
  username: string
  password: string
  database: string
  environment: string
}

export default defineComponent({
  name: 'DatabaseConnectionDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    editData: {
      type: Object as PropType<DatabaseConnection>,
      default: null
    }
  },
  emits: ['update:visible', 'confirm', 'cancel'],
  setup(props, { emit }) {
    const formRef = ref(null)
    const selectedEnv = ref('default')
    const testingConnection = ref(false)
    const saving = ref(false)

    const formData = reactive({
      name: '',
      description: '',
      dbType: 'MySQL',
      username: '',
      password: '',
      database: '',
      environment: 'default'
    })

    const rules = {
      name: [{ required: true, message: '请输入数据库名称', trigger: 'blur' }],
      dbType: [{ required: true, message: '请选择数据库类型', trigger: 'change' }]
    }

    const handleClose = () => {
      emit('update:visible', false)
      emit('cancel')
    }

    const testConnection = async () => {
      testingConnection.value = true
      try {
        // 模拟测试连接
        await new Promise((resolve) => setTimeout(resolve, 1000))
        ElMessage.success('连接成功')
      } catch (error) {
        ElMessage.error('连接失败')
      } finally {
        testingConnection.value = false
      }
    }

    const confirm = async () => {
      if (!formRef.value) return

      await formRef.value.validate(async (valid) => {
        if (valid) {
          saving.value = true
          try {
            formData.environment = selectedEnv.value
            emit('confirm', { ...formData })
            emit('update:visible', false)
          } finally {
            saving.value = false
          }
        }
      })
    }

    return {
      formRef,
      formData,
      rules,
      selectedEnv,
      testingConnection,
      saving,
      handleClose,
      testConnection,
      confirm
    }
  }
})
</script>

<style scoped>
.connection-section {
  margin-top: 20px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.connection-section h3 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 16px;
  color: #303133;
}

.env-tabs {
  margin-bottom: 20px;
}

.w-full {
  width: 100%;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>
